<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-vertical"
    :collapse="isCollapse"
    @open="handleOpen"
    @close="handleClose"
    router
  >
    <template v-for="item in menuData" :key="item.path" >
      <el-menu-item :index="item.path" v-if="!item.children">
        <el-icon>
          <component :is="item.meta?.icon"></component>
        </el-icon>
        <template #title>
          <span>{{ item.meta?.title }}</span>
        </template>
      </el-menu-item>
      <el-sub-menu :index="item.path" v-else>
        <template #title>
          <el-icon>
            <component :is="item.meta?.icon"></component>
          </el-icon>
          <span>{{ item.meta?.title }}</span>
        </template>
        <el-menu-item :index="item.path + '/' + sunMenu.path" v-for="sunMenu in item.children" :key="sunMenu.path">
          <el-icon>
            <component :is="sunMenu.meta?.icon"></component>
          </el-icon>
          <template #title>
            <span>{{ sunMenu.meta?.title }}</span>
          </template>
        </el-menu-item>
      </el-sub-menu>
    </template>
  </el-menu>
  <!-- <el-menu
    :default-active="activeIndex"
    class="el-menu-vertical"
    :collapse="isCollapse"
    @open="handleOpen"
    @close="handleClose"
    router
  >
    <el-menu-item index="/app/home">
      <el-icon><HomeFilled /></el-icon>
      <template #title>
        <span>首页</span>
      </template>
    </el-menu-item>
    <el-menu-item index="/app/user">
      <el-icon><UserFilled /></el-icon>
      <template #title>
        <span>用户管理</span>
      </template>
    </el-menu-item>
    <el-menu-item index="/app/right">
      <el-icon><Management /></el-icon>
      <template #title>
        <span>权限管理</span>
      </template>
    </el-menu-item>
    <el-menu-item index="/app/menu">
      <el-icon><icon-menu /></el-icon>
      <template #title>
        <span>菜单管理</span>
      </template>
    </el-menu-item>
    <el-menu-item index="/app/component">
      <el-icon><Tools /></el-icon>
      <template #title>
        <span>组件管理</span>
      </template>
    </el-menu-item>
  </el-menu> -->
  <div class="el-menu_footer">
    <el-icon v-if="isCollapse"  @click="isCollapse = !isCollapse"><Expand /></el-icon>
    <el-icon v-else @click="isCollapse = !isCollapse"><Fold /></el-icon>
  </div>
</template>

<script lang="ts" setup>
    import {
      Document,
      HomeFilled,
      Management,
      UserFilled,
      Menu as IconMenu,
      Tools,
      Setting,
      Expand,
      Fold
    } from '@element-plus/icons-vue'
    import { ref } from 'vue'
    import { useRouter } from 'vue-router';
    import { clearMenuItem, filterRoutes } from './utils'

    const router = useRouter()
    const menuData = filterRoutes(
      clearMenuItem(router.getRoutes()).filter((n) => n.path.startsWith('/app/')),
    );

    console.log(menuData, 'menuData')
    console.log(router.getRoutes(), 'router.getRoutes()')
    

    let activeIndex = ref("/app/home")
    let isCollapse = ref(false)
    const handleSelect = () => {}
    const handleOpen = () => {}
    const handleClose = () => {}
</script>

<style lang="less" scoped>
.el-menu-vertical {
    height: 100%;
    // max-width: 200px;
}
.el-menu-vertical:not(.el-menu--collapse) {
  width: 160px;
  height: 100%;
}
.el-menu_footer {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 60px;
  width: 100%;
  padding-left: 24px;
  border-top: 1px solid #ccc;
  font-size: 18px;
  line-height: 60px;
  text-align: left;
  
  :deep(.el-icon) {
    cursor: pointer;
  }
}
</style>